@import '~styles/settings.scss';

.c-map-menu-search {
  height: 100%;

  h3 {
    padding: 20px 10px;
    text-transform: uppercase;
    color: $slate;
    font-size: rem(14px);
    font-weight: 500;
    border-bottom: 1px solid rgba($hot-grey, 0.3);
  }

  .search-wrapper {
    display: flex;
    justify-content: space-between;
    height: calc(100% - 62px);
  }

  .side-menu-search {
    margin-bottom: rem(15px);
  }

  .search-menu {
    flex: 0 0 35%;
    flex-grow: 1;
  }

  .search-container {
    flex: 0 0 65%;
    flex-grow: 1;
    padding: 15px 10px 20px 10px;
    min-height: 300px;
  }

  .empty-search {
    position: relative;
    align-items: baseline;
    width: 100%;

    .message {
      display: flex;
      flex-flow: column;
      align-items: center;
      color: $slate;
    }

    svg {
      fill: rgba($slate, 0.5);
      width: rem(40px);
      height: rem(40px);
      margin-bottom: 19px;
    }
  }

  .label {
    font-size: rem(12px);
    width: rem(60px);
    margin-right: rem(5px);
  }

  .coord-input {
    border: 0;
    border-bottom: solid 1px $border;
    width: calc(100% - 51px);
    margin-bottom: rem(10px);

    &.error {
      color: $error;
    }

    &:focus {
      outline: none;
    }
  }

  .error-message {
    text-align: center;
    font-size: rem(11px);
    margin-top: rem(5px);
  }
}
